<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隔行变色</title>
    <style>
        div {
            font-size: 14px;
            color: white;
            line-height: 30px;
            margin-bottom: 5px;
        }

        .odd {
            background-color: lightblue;
            padding-left: 5px;
        }

        .even {
            background-color: lightpink;
            padding-left: 5px;
        }
    </style>
</head>

<body>
    <h1>名言大全</h1>
    <!-- 容器 -->
    <div id="container"></div>
    <script src="./lib/jquery.js"></script>
    <!-- 1. 引入模板引擎 -->
    <script src="lib/template-web.js"></script>
    <!-- 3. 定义模板 -->
    <script type="text/html" id="listTemp">
        {{each array}}
        {{if $index %2 ==0}}
    <div class="even">{{$value}}</div>
    {{else if $index %2!=0}}
    <div class="odd">{{$value}}</div>
    {{/if}}
    {{/each}}
    </script>

    <script>
        // 2. 定义好数据
        let data = {
            array: [
                '知人者智，自知者明。胜人者有力，自胜者强',
                '一个人即使已登上顶峰，也仍要自强不息',
                '要掌握书，莫被书掌握；要为生而读，莫为读而生',
                '业精于勤，荒于嬉；行成于思，毁于随',
                '只要持续地努力，不懈地奋斗，就没有征服不了的东西',
                '既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去',
                '滴 滴滴~',
            ],
        };
        // 4. 调用 template() 函数，获取到模板引擎拼接好的HTML字符串，渲染到 container 容器里面
        var htmlStr = template("listTemp", data)
        $("#container").append(htmlStr)
        // console.log(htmlStr);
    </script>
</body>

</html>